<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height:400px;
            width:300px;
            background:pink;
            padding-right: 40px;
            padding-top: 20px;
        }
        p{
            width:280px; 
            text-align: end;
        }
        input{
           margin-left: 5px;
        }
        span{
            position: absolute;
            top:380px;
            margin-left: 30px;
        }
        button{
            margin-right: 10px;
        }
       

    </style>
</head>
<body>
    
<!--         
        // ## 4、表单的验证（以下是需求）
        // -  【1】验证账号
        //     - 用户名不能为空
        //     - 不能使用特殊字符（只能使用数字、字母、下划线、横杠）
        //     - 必须以字母开头
        //     - 长度6-20
        // -  【2】昵称只能输入3-6个中文  /[\u4e00-\u9fa5]{3,6}/ 
        // -  【3】电子邮件
        //       + 163邮箱：
        //       + 英文开头,@前面的内容可以包含数字字母下划线、-(可以多位)
        //       + @后面的域名只能是163
        //       + 域名后缀（.com .cn .net）可以有多个。

        //   【4】身份证 18位数 后面以为可能是 X x

        // - 【5】手机号码
        // - 11位 开头必须是 1,第二位必须是 345678 还剩下 8-9位只要是数字就可以了

        // - 【6】生日验证
        //   + 1999/05/08
        //   + 1999-05-08
        //   + 19990508

        // - 【7】密码  
        //   + 长度小于20 
        //   + 不能包含空格 密码不一致能不能提交 -->

    <div class="box">
        <p><em>账号</em>   <input type="text" class="num"  id="num"></p>
        <p><em>昵称</em>     <input type="text" class="username"></p>
        <p><em>电子邮件</em> <input type="email" class="email"></p>
        <p><em>身份证</em>   <input type="number" class="idcard"></p>
        <p><em>手机号码</em> <input type="number" class="photo"></p>
        <p><em>生日 </em>    <input type="data" class="data"></p>
        <p><em>密码 </em>    <input type="password" class="password"></p>
        <p><em>确认密码</em> <input type="password" class="againpassword"></p>
       
    </div>  
    <span><button class="yess">确定</button><button class="nooo">清空</button></span>


     <script>
            // 1、获取元素
            var box=document.querySelector('.box');

            var num=document.querySelector('#num');//账号
            var username=document.querySelector('.username');//昵称
            var email=document.querySelector('.email');//电子邮件
            var idcard=document.querySelector('.idcard');//身份证
            var photo=document.querySelector('.photo');//手机号码
            var data=document.querySelector('.data');//生日
            var password=document.querySelector('.password');//密码
            var againpassword=document.querySelector('.againpassword');//确认密码
            var yess=document.querySelector('.yess')//确认
            var nooo=document.querySelector('.nooo')//清空
            var inp=document.querySelectorAll('p input')
          
            



            // box.addEventListener('change',function(e){
            //     e=e||window.event
            //     var target=e.target||e.srcElement//事件委托
                
              
                //账号
                num.onchange=function(){
                     //正则
                    var reg = /[a-z](\w|-){6,20}/i;
                    if(!reg.test(this.value)){
                        alert('用户名不能为空，不能使用特殊字符，必须以字母开头长度6-20请重新输入')
                        this.value='';
                    }
                }


                //昵称
                username.onchange=function(){
                     //正则
                    var reg = /[\u4e00-\u9fa5]{3,6}/;
                    if(!reg.test(this.value)){
                        alert('昵称只能输入3-6个中文');
                        this.value='';
                    }
                }

                  //电子邮件
                 email.onchange=function(){
                     //正则
                    var reg =/[a-z]\w{6,12}@163\.(com|cn|net)/i;
                    if(!reg.test(this.value)){
                        alert('英文开头,@前面的内容可以包含数字字母下划线');
                        this.value='';
                    }
                }

                   //身份证
                   idcard.onchange=function(){
                     //正则
                    var reg =/4\d{16}[0-9x]/i;
                    if(!reg.test(this.value)){
                        alert('身份证 18位数 后面以为可能是 X x');
                        this.value='';
                    }
                }


                   //手机号码
                   photo.onchange=function(){
                     //正则
                    var reg =/1[3-8]\d{8,9}/;
                    if(!reg.test(this.value)){
                        alert(' 11位 开头必须是 1,第二位必须是 345678 还剩下 8-9位只要是数字就可以了');
                        this.value='';
                    }
                }
 

                  //生日
                  data.onchange=function(){
                     //正则
                    var reg = /^\d{4}(-|\/)?(0[1-9]|1[0-2])\1(0[1-9]|[1-2]\d|3[0-1])$/;
                    if(!reg.test(this.value)){
                        alert(' 请输入正确的年月日');
                        this.value='';
                    }
                }

                
                  //密码
                  password.onchange=function(){
                     //正则
                    var reg = /\d{2,20}/;
                    if(!reg.test(this.value)){
                        alert(' 长度小于20,不能包含空格');
                        this.value='';
                    }
                }


                

                //密码
                againpassword.onchange=function(){
                 //正则
                    if(this.value!==password.value){
                        alert('密码不一致')
                    }
                }

                console.log(inp);
                
                //确认
                yess.onclick=function(){
                    // console.log(2);
                    for(let i=0 ;i<inp.length;i++){
                        if(inp[i].value==''){
                            alert('请检查是否还有为空的值')
                            break
                           
                        }else{
                            alert('提交成功')
                        }
  
                }     
            }
                 //取消
                 nooo.onclick=function(){ 
                    for(let i=0 ;i<inp.length;i++){
                        inp[i].value=''
                    }
                
                }








    </script>
</body>
</html>